<template>
  <div>
    <div class="row">
      <div class="col-lg col-md-6 col-sm-6 mb-4">
        <div
          class="stats-small stats-small--1 card card-small"
          style="background-color: rgb(92, 102, 250);"
        >
          <div class="card-body p-0 d-flex">
            <div class="d-flex flex-column m-auto">
              <div class="stats-small__data text-center">
                <span class="stats-small__label text-uppercase">文章总数</span>
                <h6 class="stats-small__value count my-3">{{countInfo.articleCount}}</h6>
              </div>
            </div>
            <canvas height="120" class="blog-overview-stats-small-1"></canvas>
          </div>
        </div>
      </div>
      <div class="col-lg col-md-6 col-sm-6 mb-4">
        <div
          class="stats-small stats-small--1 card card-small"
          style="background-color: rgb(248, 139, 36)"
        >
          <div class="card-body p-0 d-flex">
            <div class="d-flex flex-column m-auto">
              <div class="stats-small__data text-center">
                <span class="stats-small__label text-uppercase">评论总数</span>
                <h6 class="stats-small__value count my-3">{{countInfo.commentCount}}</h6>
              </div>
            </div>
            <canvas height="120" class="blog-overview-stats-small-2"></canvas>
          </div>
        </div>
      </div>
      <div class="col-lg col-md-4 col-sm-6 mb-4">
        <div
          class="stats-small stats-small--1 card card-small"
          style="background-color: rgb(4, 141, 59);"
        >
          <div class="card-body p-0 d-flex">
            <div class="d-flex flex-column m-auto">
              <div class="stats-small__data text-center">
                <span class="stats-small__label text-uppercase">用户数</span>
                <h6 class="stats-small__value count my-3">{{countInfo.userCount}}</h6>
              </div>
            </div>
            <canvas height="120" class="blog-overview-stats-small-3"></canvas>
          </div>
        </div>
      </div>
      <div class="col-lg col-md-4 col-sm-6 mb-4">
        <div
          class="stats-small stats-small--1 card card-small"
          style="background-color: rgb(219, 70, 44);"
        >
          <div class="card-body p-0 d-flex">
            <div class="d-flex flex-column m-auto">
              <div class="stats-small__data text-center">
                <span class="stats-small__label text-uppercase">分类</span>
                <h6 class="stats-small__value count my-3">{{countInfo.categoryCount}}</h6>
              </div>
            </div>
            <canvas height="120" class="blog-overview-stats-small-4"></canvas>
          </div>
        </div>
      </div>
    </div>
    <dv-decoration-5 style="width:100%;"></dv-decoration-5>
    <div id="myChart">d</div>
    <br />
    <dv-decoration-10 style="width:100%;height:10px" />

    <el-row :gutter="20" style="margin-top:20px">
      <el-col :xs="24" :sm="18" :md="12" :lg="13" :xl="15">
        <!-- 热门文章轮播表 -->
        <span>&nbsp; &nbsp; &nbsp;热门文章</span>
        <dv-scroll-board :config="config" style="width:100%;height:220px;margin:20x,20px" />
      </el-col>

      <el-col :xs="24" :sm="6" :md="12" :lg="11" :xl="9">
        <!-- 热门标签图 -->
        <div id="hotTag"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import "../../assets/css/shards-dashboards.1.1.0.css";
import homeApi from "@/api/home";
import { reject } from "q";
export default {
  data() {
    return {
      //各模块总记录数
      countInfo: {
        articleCount: "",
        userCount: "",
        categoryCount: "",
        commentCount: ""
      },
     
      config: {}, //轮播表

      myChart: null, //折线图
      name: [],
      dataInfo: {
        //折线图
        xData: [],
        areaArticleData: [],
        areaCommentData: []
      },

      hotTagChart: null,
      hotTagData: [],
      hotTagOptions: {} //热门标签选项
    };
  },
  created() {
    this.fetchCount();
    /**
     * 热门文章列表
     */
    this.fetchHot20().then(value => {
      console.log(value.data);
      this.config = {
        header: ["编号", "标题", "作者", "获赞数"],
        data: value.data,
        index: true,
        columnWidth: [50],
        align: ["center"],
        rowNum: 5
      };
      // this.config=value
      //console.log(this.config)
    });
  },
  mounted() {
    this.initAraeChart();

    // this.initHotTagOption();
    this.initHotTagChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;

    if (!this.hotTagChart) {
      return;
    }
    this.hotTagChart.dispose();
    this.hotTagChart = null;
  },

  methods: {
 
    /**
     * 查询前20个热门文章
     */
    fetchHot20() {
      return new Promise((resolve, reject) => {
        homeApi.fetchHot20().then(resp => {
          if (resp.data.flag) {
            resolve(resp.data.data);
          } else {
            reject();
          }
        });
      });
    },
    /**
     * 查询各模块总记录数
     */
    fetchCount() {
      homeApi.fetchCount().then(resp => {
        if (resp.data.flag) {
          this.countInfo = resp.data.data;
        }
      });
    },
    //初始化折线图
    initAraeChart() {
      this.myChart = this.$echarts.init(document.getElementById("myChart"));
      homeApi.fetchArticleAndCommentNumByCategory(1).then(resp => {
        if (resp.data.flag) {
          this.myChart.setOption({
            backgroundColor: "#000B2B",
            title: {
              text: "各分类的文章和评论数量图",
              textStyle: {
                color: "white"
              }
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross", //cross 坐标轴指示器 line：线指示器 shadow 阴影指示器
                label: {
                  backgroundColor: "#6a7985"
                }
              }
            },
            legend: {
              top: "20",
              data: ["文章", "评论"],
              textStyle: {
                color: "white",
                fontSize: "16"
              }
            },
            toolbox: {
              feature: {
                saveAsImage: {},
                dataView: {}
              }
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: [
              {
                axisLine: {
                  lineStyle: {
                    color: "#008ED5",
                    width: "4",
                    type: "solid"
                  }
                },
                axisLabel: {
                  textStyle: {
                    color: "white",
                    fontSize: "10"
                  },
                  //旋转角度
                  rotate: "30",
                  interval: "0" //强制显示所有项
                },
                //刻度线
                axisTick: {
                  lineStyle: {
                    color: "#ffffff",
                    width: "2",
                    type: "solid"
                  }
                },
                //分隔线
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: "#05275C",
                    width: "1",
                    type: "solid"
                  }
                },
                //分割面积
                splitArea: {
                  show: true,
                  areaStyle: {
                    //分割列色彩
                    color: ["#0C365C", "#081C3F"]
                  }
                },

                type: "category",
                boundaryGap: false,
                data: resp.data.data[0].xData
              }
            ],
            yAxis: [
              {
                type: "value",
                axisLabel: {
                  textStyle: {
                    color: "white",
                    fontSize: "18"
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: "black",
                    width: "2",
                    type: "solid"
                  }
                },
                //分隔线
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: "black",
                    width: "1",
                    type: "solid"
                  }
                }
              }
            ],
            series: [
              {
                name: "文章",
                type: "line",
                stack: "总量",
                lineStyle: {
                  normal: {
                    type: "dotted", //点状线
                    width: "4"
                  }
                },

                //显示数据
                label: {
                  normal: {
                    show: true,
                    textStyle: {
                      color: "#8CB8BE"
                    }
                  },
                  //图标高亮，鼠标在哪里哪里变色
                  emphasis: {
                    show: true,
                    textStyle: {
                      color: "#8CB8BE",
                      fontSize: "15"
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    color: "#8CB8BE"
                  }
                },
                legendHoverLink: true,
                symbol: "arrow", //悬停有箭头
                symbolSize: "13",
                data: resp.data.data[0].areaArticleData
              },
              {
                name: "评论",
                type: "line",
                lineStyle: {
                  normal: {
                    type: "solid", //点状线
                    width: "4"
                  }
                },
                //显示数据
                label: {
                  normal: {
                    show: true,
                    textStyle: {
                      color: "#DDA38F"
                    }
                  },
                  //强调，鼠标在哪里哪里变色
                  emphasis: {
                    show: true,
                    textStyle: {
                      color: "#DDA38F",
                      fontSize: "15"
                    }
                  }
                },
                symbol: "circle", //悬停有样式
                symbolSize: "13",
                data: resp.data.data[0].areaCommentData
              }
            ],
            color: ["#DDA38F", "#8CB8BE"] //设置线及图标等的色彩
          });
        }
      });
    },

    /**
     * 初始化热门标签饼状图
     */
    initHotTagChart() {
      this.hotTagChart = this.$echarts.init(document.getElementById("hotTag"));
      homeApi.fetchHotTag20().then(resp => {
        if (resp.data.flag) {
          this.hotTagChart.setOption({
            backgroundColor: "white",

            title: {
              text: "热门标签top20",
              left: "center",
              top: 20,
              textStyle: {
                color: "black"
              }
            },

            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c} ({d}%)"
            },

            visualMap: {
              show: false,
              min: 80,
              max: 600,
              inRange: {
                colorLightness: [0.4, 5]
              }
            },
            series: [
              {
                name: "热门标签",
                type: "pie",
                radius: "55%",
                center: ["50%", "50%"],
                data: JSON.parse(JSON.stringify(resp.data.data)).sort(function(
                  a,
                  b
                ) {
                  return a.value - b.value;
                }),
                roseType: "radius",
                label: {
                  show: true,

                  normal: {
                    textStyle: {
                      fontWeight: "bold",
                      color: "black",
                      fontSize: "13"
                    }
                  }
                },
                labelLine: {
                  normal: {
                    lineStyle: {
                      color: "black"
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 30
                  }
                },
                itemStyle: {
                  normal: {
                    color: "#c23531",
                    shadowBlur: 200,
                    shadowColor: "rgba(0, 0, 0, 0.5)"
                  }
                },

                animationType: "scale",
                animationEasing: "elasticOut",
                animationDelay: function(idx) {
                  return Math.random() * 200;
                }
              }
            ]
          });
        }
      });
    }
  }
};
</script>
<style scoped>
#myChart {
  width: 100%;
  height: 500px;
}
#hotTag {
  width: 100%;
  height: 300px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
